<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insta</title>
<link rel="stylesheet" href="css/jquery-ui.css">
<script>
	function doLogin(frm) {
		if (frm.j_username.value == '') {
			alert("아이디를 입력해주세요.");
			return false;
		}
		if (frm.j_password.value == '') {
			alert("패스워드를 입력해주세요.");
			return false;
		}

		frm.submit();
	}

	var img_L = 300;
	var img_T = 100;
	var targetObj;

	function getLeft(o){
		return parseInt(o.style.left.replace('px', ''));
	}
	function getTop(o){
		return parseInt(o.style.top.replace('px', ''));
	}

	// 이미지 움직이기
	function moveDrag(e){
		var e_obj = window.event? window.event : e;
		var dmvx = parseInt(e_obj.clientX + img_L);
		var dmvy = parseInt(e_obj.clientY + img_T);
		targetObj.style.left = dmvx +"px";
		targetObj.style.top = dmvy +"px";
		return false;
	}

	// 드래그 시작
	function startDrag(e, obj){
		targetObj = obj;
		var e_obj = window.event? window.event : e;
		img_L = getLeft(obj) - e_obj.clientX;
		img_T = getTop(obj) - e_obj.clientY;

		document.onmousemove = moveDrag;
		document.onmouseup = stopDrag;
		if(e_obj.preventDefault)e_obj.preventDefault(); 
	}

	// 드래그 멈추기
	function stopDrag(){
		document.onmousemove = null;
		document.onmouseup = null;
	}
	 
</script>
<style type="text/css">
body {
	background-image: url('img/login.jpg');
	background-repeat: no-repeat;
}

form {
	position: relative;
	width: 200px;
	height: 220px;
	padding: 15px 25px 0 25px;
	/* margin-top: 10%;
	margin-left: 70%; */
	cursor: default;
	
	background-color: #141517;
	filter:alpha(Opacity=60);opacity:.6;
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 7px;
	-webkit-box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, .2), inset 0px 1px 1px 0px rgb(0, 0, 0);
	-moz-box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, .2), inset 0px 1px 1px 0px rgb(0, 0, 0);
	box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, .2), inset 0px 1px 1px 0px rgb(0, 0, 0);
}

form:before {
	position: absolute;
	top: -12px;
	left: 10px;
	width: 0px;
	height: 0px;
	content: '';
	border-bottom: 10px solid #141517;
	border-right: 10px solid #141517;
	border-top: 10px solid transparent;
	border-left: 10px solid transparent;
}

h1 {
    line-height: 40px;
    font-family: 'Myriad Pro', sans-serif;
    font-size: 22px;
    font-weight: normal;
    color: #e4e4e4;
}

input[type=text],
input[type=password],
input[type=button] {
    line-height: 14px;
    margin: 10px 0;
    padding: 6px 15px;
    border: 0;
    outline: none;
 
    font-family: Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 0px 1px 1px rgba(255,255,255, .2);
 
    -webkit-border-radius: 26px;
    -moz-border-radius: 26px;
    border-radius: 26px;
 
    -webkit-transition: all .15s ease-in-out;
    -moz-transition: all .15s ease-in-out;
    -o-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out;
}

input[type=text]:hover,
input[type=password]:hover {
    -webkit-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6), 0px 0px 5px rgba(255,255,255, .5);
    -moz-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6), 0px 0px 5px rgba(255,255,255, .5);
    box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6), 0px 0px 5px rgba(255,255,255, .5);
}

input[type=text]:focus,
input[type=password]:focus {
    background: #e1e1e1;
    background: -moz-linear-gradient(top,  #ffffff 0%, #e1e1e1 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e1e1e1));
    background: -webkit-linear-gradient(top,  #ffffff 0%,#e1e1e1 100%);
    background: -o-linear-gradient(top,  #ffffff 0%,#e1e1e1 100%);
    background: -ms-linear-gradient(top,  #ffffff 0%,#e1e1e1 100%);
    background: linear-gradient(top,  #ffffff 0%,#e1e1e1 100%);
}

input[type=button] {
    float: right;
    cursor: pointer;
 
    color: #445b0f;
 
    -webkit-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .45), 0px 1px 1px 0px rgba(0,0,0, .3);
    -moz-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .45), 0px 1px 1px 0px rgba(0,0,0, .3);
    box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .45), 0px 1px 1px 0px rgba(0,0,0, .3);
}

input[type=button]:hover {
    -webkit-box-shadow: inset 1px 1px 3px 0px rgba(255,255,255, .8), 0px 1px 1px 0px rgba(0,0,0, .6);
    -moz-box-shadow: inset 1px 1px 3px 0px rgba(255,255,255, .8), 0px 1px 1px 0px rgba(0,0,0, .6);
    box-shadow: inset 1px 1px 3px 0px rgba(255,255,255, .8), 0px 1px 1px 0px rgba(0,0,0, .6);
}
 
input[type=button]:active {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.js span.checked:before {
    background: #a5cd4e;
    background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
    background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
    background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
    background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
    background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
}

label {
    top: 1px;
    left: 25px;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 12px;
    color: #e4e4e4;
}

</style>

</head>
<body>
	<div style='position:absolute; left:300px; top:100px; cursor:pointer; cursor:hand' onmousedown='startDrag(event, this)'>
		<form action="j_spring_security_check" method="post">
		<h1>Login Form</h1>
			<input type="text" name="j_username" placeholder="username">
			<input type="password" name="j_password" placeholder="password"><br>
			<span>
			<input type="checkbox" name="checkbox"><label for="checkbox">remember</label>
			</span>
			<input type="button" value="로그인" onClick="doLogin(this.form)">
		</form>
	</div>

</body>
</html>